<template>
  <el-card>
    <div slot="header" style="line-height: 40px">
      <h1>订单编辑页面</h1>
    </div>
    <el-form ref="ordersForm" :rules="rules" label-width="80px" :model="ordersForm">
      <el-form-item label="ID" v-show="false">
        <el-input v-model="ordersForm.id" disabled></el-input>
      </el-form-item>
      <el-form-item label="用户ID" prop="uid">
        <el-input controls-position="right" v-model.trim="ordersForm.uid"></el-input>
      </el-form-item>
      <el-form-item label="商品ID" prop="pid">
        <el-input v-model.trim="ordersForm.pid"></el-input>
      </el-form-item>
      <el-form-item label="地址ID" prop="aid">
        <el-input v-model.trim="ordersForm.aid"></el-input>
      </el-form-item>
      <el-form-item label="订单时间" prop="otime">
        <el-date-picker v-model="ordersForm.otime" type="datetime" placeholder="选择订单时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item prop="oispay">
        <el-switch style="display: block" v-model="ordersForm.oispay" active-color="#ff4949" inactive-color="#13ce66"
          inactive-text="是否已支付" :active-value="0" :inactive-value="1">
        </el-switch>
      </el-form-item>
      <el-form-item prop="oissend">
        <el-switch style="display: block" v-model="ordersForm.oissend" active-color="#ff4949" inactive-color="#13ce66"
          inactive-text="是否已发货" :active-value="0" :inactive-value="1">
        </el-switch>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
        <el-button @click="onReset">重置</el-button>
        <el-button @click="$router.back()">返回</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
  import ordersApi from '@/http/ordersApi';

  export default {
    data() {
      let checkuid = (rule, value, callback) => {
        ordersApi.checkuid(value).then(res => {
          console.log(res);
          if (res.data.code == 200) {
            if (res.data.msg) {
              callback();
            } else {
              callback(new Error());
            }
          } else {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: 'error',
            });
          }
        });
      };
      let checkpid = (rule, value, callback) => {
        ordersApi.checkpid(value).then(res => {
          console.log(res);
          if (res.data.code == 200) {
            if (res.data.msg) {
              callback();
            } else {
              callback(new Error());
            }
          } else {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: 'error',
            });
          }
        });
      };
      let checkaid = (rule, value, callback) => {
        ordersApi.checkaid(value).then(res => {
          console.log(res);
          if (res.data.code == 200) {
            if (res.data.msg) {
              callback();
            } else {
              callback(new Error());
            }
          } else {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: 'error',
            });
          }
        });
      };
      return {
        ordersForm: {},
        rules: {
          uid: [{
              required: true,
              message: '请输入ID',
              trigger: 'blur',
            },
            {
              validator: checkuid,
              message: '没有这个用户ID',
              trigger: 'blur',
            },
          ],
          pid: [{
              required: true,
              message: '请输入ID',
              trigger: 'blur',
            },
            {
              validator: checkpid,
              message: '没有这个商品ID',
              trigger: 'blur',
            },
          ],
          aid: [{
              required: true,
              message: '请输入ID',
              trigger: 'blur',
            },
            {
              validator: checkaid,
              message: '没有这个地址ID',
              trigger: 'blur',
            },
          ],
          otime: [{
            required: true,
            message: '请输入订单时间',
            trigger: 'blur',
          }, ],
        },
      };
    },
    created() {
      this.getEditObj();
    },
    methods: {
      onSubmit() {
        this.$refs['ordersForm'].validate(valid => {
          if (valid) {
            console.log('submit!', this.ordersForm);
            ordersApi.save(this.ordersForm).then(res => {
              console.log(res);
              if (res.data.code == 200) {
                this.$router.replace('/orders.html');
              } else {
                this.$message({
                  showClose: true,
                  message: res.data.msg,
                  type: 'error',
                });
              }
            });
          } else {
            console.log('error submit!!');
            return false; //阻止表单提交
          }
        });
      },
      onReset() {
        this.$refs['ordersForm'].resetFields();
      },
      getEditObj() {
        let id = this.$route.params.id;
        if (id) {
          ordersApi.edit(id).then(res => {
            if (res.data.code == 200) {
              this.ordersForm = res.data.data;
            }
          });
        }
      },
    },
  };
</script>

<style></style>